<template>
  <div class="flex flex-col gap-4 container">
    <h3 class="text-2xl font-medium mb-4 text-center">
      {{ $t("home.PlateFormOverview") }}
    </h3>
    <div class="tabs">
      <div class="tab-buttons">
        <el-button
          v-for="(tab, index) in tabs"
          :key="index"
          :class="{ active: activeTab === index }"
          @click="changeTab(index)"
        >
          {{ tab.title }}
        </el-button>
      </div>
      <div class="tab-content">
        <TabComponent :textList="tabs[activeTab].content"></TabComponent>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
import TabComponent from "./TabComponent.vue";
import { useI18n } from "vue-i18n";
import { computed } from "vue";
const { t } = useI18n();
const activeTab = ref(0);
const tabs = computed(() => {
  return [
    {
      title: `${t("plateForm.OpenTravelAI")}`,
      content: [
        t("plateForm.OpenTravelAI1"),
        t("plateForm.OpenTravelAI2"),
        t("plateForm.OpenTravelAI3"),
      ],
    },
    {
      title: t("plateForm.PreciseAirfareSales"),
      content: [
        t("plateForm.PreciseAirfareSales1"),
        t("plateForm.PreciseAirfareSales2"),
        t("plateForm.PreciseAirfareSales3"),
      ],
    },
    {
      title: t("plateForm.AirfareSettlement"),
      content: [
        t("plateForm.AirfareSettlement1"),
        t("plateForm.AirfareSettlement2"),
        t("plateForm.AirfareSettlement3"),
        t("plateForm.AirfareSettlement4"),
        t("plateForm.AirfareSettlement5"),
      ],
    },
  ];
});

const changeTab = (index) => {
  activeTab.value = index;
};
</script>
<style scoped lang="scss">
.container {
  width: 80%;
  .tab-buttons .el-button {
    border: none;
    background-color: transparent;
    cursor: pointer;
    padding: 10px 15px;
    font-size: 16px;
    width: 32%;
    border-radius: 0;
  }

  .tab-buttons .active {
    font-weight: bold;
    border-bottom: 2px solid skyblue;
  }
  button:focus,
  button:focus-visible {
    outline: none;
  }

  .tab-content {
    margin-top: 20px;
  }
}
</style>
